<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<link rel="stylesheet" type="text/css" href="css/music.css" />
	</head>

	<body>

		<div class="mui-content">
			<!--下拉刷新容器-->
			<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<ul class="mui-table-view mui-table-view-chevron">
						<ul id="list" class="mui-table-view">
							<!--<li class="mui-table-view-cell mui-media">
								<img class="mui-media-object mui-pull-left" src="">
								<div class="mui-media-body">
									<span>幸福</span>
									<p class="mui-ellipsis">欣欣</p>
								</div>
							</li>-->
						</ul>
					</ul>
				</div>
			</div>
		</div>
		
		<script src="js/template-web.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<!--<script type="text/javascript" src="js/music.js" ></script>-->
		<!--创建一个模板-->
	    <script type="text/html" id="tpl-li">
	    	
	    	<% for (var i = 0; i < data.length; i++) {%>
	    		<li class="mui-table-view-cell mui-media" data-souce="<%= data[i].url %>" data-img="<%= data[i].albumpic_big %>" data-cid="<%= data[i].songid %>">
					<img class="mui-media-object mui-pull-left" src="<%= data[i].albumpic_small %>">
					<div class="mui-media-body">
						<span><%= data[i].singername %></span>
						<p class="mui-ellipsis"><%= data[i].songname %></p>
					</div>
				</li>
	    	<%}%>
	    	
	    </script>
	    
		<script type="text/javascript">
		mui.init({
	    	 subpages:[{
		      url:'mlist.html',//子页面HTML地址，支持本地地址和网络地址
		      id:'mlist',//子页面标志
		      styles:{
		        top:0,//子页面顶部位置
		        bottom:0,//子页面底部位置 
		      },
		      extras:{}//额外扩展参数
		    }],
		    pullRefresh: {
    		container: '#refreshContainer',
    		up: {
      			contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的
				contentnomore:'别扯了，到底啦！',//可选，请求完毕若没有更多数据时显示的提醒内容；
    			auto: true,
    			callback: pullupRefresh
    			}
    		}
    	})
		
		//请求接口
		var page = 0;
	    function pullupRefresh() {
	    	page++;
	    	mui.get('http://route.showapi.com/213-4', {
	    		topid:'5',
	    		showapi_appid: 36599,
	    		showapi_sign: 'dde227bf0cea4c6ebcadc89b99477157',
	    		maxResult: 10,
	    		page: page
	    	}, function(res) { 
	    		//console.log(res);
	    		if (res && res.showapi_res_code == 0) {
	    			
	    			var data = res.showapi_res_body;
	    			//前20组数据
	    			var songlist = data.pagebean.songlist.splice(0,20);
//	    			console.log(songlist)
	    			var lis = template('tpl-li', {data: songlist});
	    			//console.log(lis);
	    			$('#list').append(lis);
	    			
	    		} else {
	    			mui.alert(res.showapi_res_error);
	    		}
	    		if(page == 2) {
	    		    mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
	    		}else {
	    			mui('#refreshContainer').pullRefresh().endPullupToRefresh();
	    		}
	    	}, 'json');
	    }
	    
			mui.plusReady(function(){
				
				var detailPage = null;
			//添加列表项的点击事件
			mui('#list').on('tap', 'li', function() {
				
				  var souce = this.getAttribute('data-souce');
				  var smg = this.getAttribute('data-img');
				  var id = this.getAttribute('data-cid');
				  console.log(id)
				  //获得详情页面
				  if(!detailPage){
				    detailPage = plus.webview.getWebviewById('plays.html');
				  }

				//打开播放页面          
				  mui.openWindow({
				  	url:'plays.html',
				  	id:'plays',
				  	styles:{
				  		top:'45px',
				  		bottom:'50px'
				  	},
				  	 extras:{//扩展在参数
				  	 	src:souce,
				  	 	pic:smg,
				  	 	cid:id
				  	 }
				  })
				  
			   });  
			})
	    
			</script>
		</body>

</html>